<template>
  <!-- 全屏容器 -->
  <v-scale-screen width="1920" height="1080" fullScreen>
    <div class="container">
      <dv-border-box-11 title="温湿度预览">
        <div class="borderBox">
          <!-- 日期 -->
          <div
            class="dateTime"
            style="
              color: white;
              position: absolute;
              top: 80px;
              right: 150px;
              font-weight: bolder;
              font-size: 18px;
            "
          >
            {{ formattedDate }}
          </div>
          <!-- 返回 -->
          <div
            style="
              height: 13%;
              display: flex;
              align-items: flex-end;
              padding: 20px 155px 20px;
            "
          >
            <i
              class="el-icon-d-arrow-left"
              style="
                color: aliceblue;
                font-size: 20px;
                position: absolute;
                top: 80px;
                left: 35px;
              "
              @click="goback"
              >返回</i
            >
          </div>
          <div style="height: 45%; width: 35%; margin-left: 20px">
            <div>
              <el-switch
                @change="swichChange()"
                style="margin-left: 30px"
                v-model="switchValue"
                active-text="粮油库"
                inactive-text="干调库"
                inactive-color="#13ce66"
                active-color="#287CE8"
                class="custom-switch"
              >
              </el-switch>
              <el-radio-group
                v-model="radio"
                style="margin-left: 20px"
                @input="changeDays"
              >
                <el-radio :label="7" style="color: white">7天</el-radio>
                <el-radio :label="15" style="color: white">15天</el-radio>
                <el-radio :label="30" style="color: white">30天</el-radio>
              </el-radio-group>
            </div>
            <Chart
              width="100%"
              height="87%"
              :option="ChartTemperature1"
            ></Chart>
          </div>
          <div style="height: 45%; width: 50%; margin-left: 20px">
            <!-- <div>
              <el-switch
                @change="swichChange2()"
                style="margin-left: 30px"
                v-model="switchValue2"
                active-text="粮油库"
                inactive-text="干调库"
                inactive-color="#13ce66"
                active-color="#287CE8"
                class="custom-switch"
              >
              </el-switch>
              <el-radio-group
                v-model="radio"
                style="margin-left: 20px"
                @input="changeDays"
              >
                <el-radio :label="7" style="color: white">7天</el-radio>
                <el-radio :label="15" style="color: white">15天</el-radio>
                <el-radio :label="30" style="color: white">30天</el-radio>
              </el-radio-group>
            </div> -->
            <Chart
              width="100%"
              height="87%"
              :option="ChartTemperature2"
            ></Chart>
          </div>
        </div>
      </dv-border-box-11>
    </div>
  </v-scale-screen>
</template>
<script>
import ChartBox from "../components/chartBox.vue";
import Chart from "../components/chart.vue";
import { getIotTempWetChats } from "../api/api";
import { baseUrl } from "../utils/request";
import * as echarts from "echarts";

export default {
  data() {
    return {
      radio: 3,
      locationIndex: 0,
      currentDate: new Date(),
      switchValue: true,
      switchValue2: true,
      axisData1: [], //日期
      seriesData: [
        [], //最高温度
        [], //最低温度
        [], //最高湿度
        [], //最低湿度
      ], //数据
      ChartTemperature1: {}, //图表配置项（温度）
      ChartTemperature2: {}, //图表配置项（温度）
    };
  },
  computed: {
    formattedDate: function () {
      var year = this.currentDate.getFullYear();
      var month = this.currentDate.getMonth() + 1;
      var day = this.currentDate.getDate();
      var weekdays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      var weekday = weekdays[this.currentDate.getDay()];
      return year + "年" + month + "月" + day + "日 " + weekday;
    },
  },
  methods: {
    changeDays: function (val) {
      this.getIotTempWetChatsData(val);
    },
    swichChange() {
      this.locationIndex == 0
        ? (this.locationIndex = 1)
        : (this.locationIndex = 0);
      this.getIotTempWetChatsData();
    },
    swichChange2() {
      this.locationIndex == 0
        ? (this.locationIndex = 1)
        : (this.locationIndex = 0);
      this.getIotTempWetChatsData();
    },
    setTemperature() {
      this.ChartTemperature1 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "rgba(255,255,255,0.7)",
            },
          },
          backgroundColor: "rgba(255,255,255,0.1)",
          padding: [5, 10],
          textStyle: {
            color: "rgb(255,255,255)",
          },
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "10%",
          bottom: "12%",
          containLabel: true,
        },
        legend: {
          x: "right",
          y: "0",
          icon: "circle",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 60,
          textStyle: {
            color: "#C0C4CC",
            fontSize: 13,
            fontWeight: "bold",
          },
          data: ["最高温度", "最低温度"],
        },
        xAxis: {
          type: "category",
          data: this.axisData1,
          boundaryGap: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              type: "line",
              color: "#2557B4",
            },
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: "#C0C4CC",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            position: "left",
            name: "单位：温度（℃）",
            nameTextStyle: {
              padding: [0, 0, 0, 65],
              color: "#C0C4CC",
              fontSize: 13,
              fontWeight: "bold",
              // lineHeight: 40,
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#C0C4CC",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.3)",
              },
            },
            axisLabel: {
              show: true,
              margin: 2,
              textStyle: {
                fontSize: 12,
                color: "#DEEBFF",
              },
            },
          },
        ],
        series: [
          {
            name: "最高温度",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbol: "circle",
            symbolSize: 10,
            data: this.seriesData[0],
            itemStyle: {
              normal: {
                color: "#F4F65B",
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(116,160,249,0.15)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(29,63,120,0)", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#F4F65B",
              },
            },
          },
          {
            name: "最低温度",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbol: "circle",
            symbolSize: 10,
            data: this.seriesData[1],
            itemStyle: {
              normal: {
                color: "#55D1FD",
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
            label: {
              show: true,
              position: "bottom",
              textStyle: {
                color: "#55D1FD",
              },
            },
          },
        ],
      };
    },
    setTemperature2() {
      this.ChartTemperature2 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "rgba(255,255,255,0.7)",
            },
          },
          backgroundColor: "rgba(255,255,255,0.1)",
          padding: [5, 10],
          textStyle: {
            color: "rgb(255,255,255)",
          },
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "10%",
          bottom: "12%",
          containLabel: true,
        },
        legend: {
          x: "right",
          y: "0",
          icon: "circle",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 60,
          textStyle: {
            color: "#C0C4CC",
            fontSize: 13,
            fontWeight: "bold",
          },
          data: ["最高湿度", "最低湿度"],
        },
        xAxis: {
          type: "category",
          data: this.axisData1,
          boundaryGap: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          // type: 'dashed',
          axisLine: {
            lineStyle: {
              type: "line",
              color: "#2557B4",
            },
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: "#C0C4CC",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            position: "left",
            name: "单位：湿度（ %rh）",
            nameTextStyle: {
              padding: [0, 0, 0, 80],
              color: "#C0C4CC",
              fontSize: 13,
              fontWeight: "bold",
              // lineHeight: 40,
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#C0C4CC",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.3)",
              },
            },
            axisLabel: {
              show: true,
              margin: 2,
              textStyle: {
                fontSize: 12,
                color: "#DEEBFF",
              },
            },
          },
        ],
        series: [
          {
            name: "最高湿度",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbol: "circle",
            symbolSize: 10,
            data: this.seriesData[2],
            itemStyle: {
              normal: {
                color: "#287CE8",
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#287CE8",
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },                     
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(116,160,249,0.25)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(29,63,120,0)", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          {
            name: "最低湿度",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbol: "circle",
            symbolSize: 10,
            data: this.seriesData[3],
            itemStyle: {
              normal: {
                color: "#38FFBA",
              },
            },
            label: {
              show: true,
              position: "bottom",
              textStyle: {
                color: "#38FFBA",
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },   
          },
        ],
      };
    },
    goback() {
      this.$router.push("/larges");
    },
    async getIotTempWetChatsData(val) {
      this.axisData1 = [];
      this.seriesData[0] = [];
      this.seriesData[1] = [];
      this.seriesData[2] = [];
      this.seriesData[3] = [];
      const res = await getIotTempWetChats({ days: val });
      // 假设res.data.data[0].data是一个对象数组
      let dataArray = res.data.data[this.locationIndex].data;
      // 使用map方法遍历对象数组，同时处理date、max_temp、min_temp、max_wet和min_wet字段的值
      dataArray.forEach((obj) => {
        // 日期
        this.axisData1.push(obj.date.substring(obj.date.length - 5));
        // 最高温度
        this.seriesData[0].push(obj.max_temp);
        //最低温度
        this.seriesData[1].push(obj.min_temp);
        // 最高湿度
        this.seriesData[2].push(obj.max_wet);
        // 最低湿度
        this.seriesData[3].push(obj.min_wet);
      });
      this.setTemperature();
      this.setTemperature2();
    },
  },
  components: { ChartBox, Chart },
  created() {
    this.getIotTempWetChatsData();
  },
  mounted() {},
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.container {
  width: 1920px;
  height: 1080px;
  background: url("../assets/image/bg.577ccc4c.jpg");
  .borderBox {
    height: 100%;
    width: 100%;
  }
}
</style>
<style lang="scss" scoped></style>
